<template>
	<view class="dk-container" id="mapBox">
		<view class="map-web-jm-info" @click="toDetailPage()">本月共打卡<text>{{dkNumber}}</text>次</view>
		<view :class="btmMsg">
			<!-- 打卡按钮 -->
			<view class="weui-cell" @click="getDaKaPoint()" style="padding-top: 0;">
				<view class="page__bd page__bd_spacing" style="margin: 0 auto;border: none;">
					<view class="weui-btn daka">打卡</view>
					<view class="time">{{ current }}</view>
				</view>
			</view>

			<view class="location">
				<view class="weui-cells weizhi" v-show="isClick">
					<view class="weui-cell weui-cell_access">
						<view class="weui-cell__bd">
							<input class="weui-input" v-model="addressComponents" disabled="disabled">
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="mask" v-if="showSelectPointsWin == true" @click="closeShowSelectPointsWin()">
			<view class="select-points-win">
				<view class="top">请选择门店打卡</view>
				<view class="box">
					<view v-if="dakaPointList.length > 0" class="select-points-item" v-for="(item, index) in dakaPointList" :key="index">
						<view class="left">
							<view class="select-points-md">{{item.storeName}}</view>
							<view class="select-points-xz">门店类型: {{item.storeType}}</view>
						</view>
						<view class="right">
							<view class="select-points-btn" @tap.stop="punchClock(item)">打卡</view>
						</view>
					</view>
					<view v-if="dakaPointList.length == 0" class="select-points-item2">{{ noPointTips }}</view>
					<view class="select-points-bottom-line"></view>
				</view>
			</view>
		</view>

		<view class="mask" v-if="showSuccessWin == true">
			<view class="daka-success-win">
				<image src="../../static/succ@3x.png"></image>
				<view class="daka-success-tip">打卡成功!</view>
				<view class="daka-success-info">打卡时间：{{dkdata.date}}</view>
				<view class="daka-success-info">打卡门店：{{dkdata.name}}</view>
				<view class="daka-success-btn" @tap.stop="closeShowSuccessWin()">确定</view>
				<view class="select-points-bottom-line"></view>
			</view>
		</view>

		<u-toast ref="uToast" z-index="9999" />
	</view>
</template>

<script>
	import {
		getMapJmSalesDkInfo,
		getMapJmSalesDeviceInfo,
		dkByMapJmSalesDevice,
		wxGetTxMapByLatLng
	} from '../../common/service.js'
	import utils from '../../common/utils.js'
	export default {
		data() {
			return {
				noPointTips: '暂无打卡门店',
				isClick: true,
				showSelectPointsWin: false,
				showSuccessWin: false,
				isshow: false,
				btmMsg: 'btmMsg1',
				current: '',
				dkNumber: 0,
				yxjl: 0,
				position: '',
				latitude: '',
				longitude: '',
				currentLocation: null,
				geocoder: null,
				dkdata: null,
				province: '',
				city: '',
				district: '',
				town: '',
				street: '',
				streetNumber: '',
				addressComponents: '',
				addressComponents1: '',
				addressComponents2: '',
				markersArray: [],
				dakaPointList: [],
				imgUrl: require('../../static/mydw.png'),
				timer: null
			};
		},
		onLoad: function() {
			this.LOGINACTION();
		},
		onShow: function() {
			const that = this;
			that.current = utils.dateFormat('HH:MM:SS', new Date());
			that.timer = setInterval(function() {
				that.current = utils.dateFormat('HH:MM:SS', new Date());
			}, 1000);
			that.getDkNumber();
			that.INITWXJSDK(that.CONFIG.appid, location.origin + location.pathname + location.search, function() {
				that.$wx.getLocation({
					type: 'gcj02',
					success: function(res) {
						console.log('获取当前地理位置:');
						console.log(res);
						that.latitude = res.latitude;
						that.longitude = res.longitude;
						that.mapinit();
					},
					cancel: function(res) {
						alert('用户拒绝授权获取地理位置');
					}
				});
			}, ['getLocation'])
		},
		methods: {
			getDkNumber: function() {
				const that = this;
				if (!(that.CONFIG.user && that.CONFIG.user.id)) {
					return;
				}
				const yearAndMonth = utils.dateFormat('YYYY-mm', new Date());
				const params = {
					code: that.CONFIG.user.id,
					date: yearAndMonth
				};
				getMapJmSalesDkInfo(params, function(resuser) {
					console.log('获取考勤打卡记录:');
					console.log(resuser);
					if (resuser && resuser.statusCode == 200) {
						const rs = resuser.data;
						console.log('rs:');
						console.log(rs);
						if (rs.code == 200) {
							that.dkNumber = rs.dkNumber || 0;
						} else {
							that.$refs.uToast.show({
								title: rs.msg || '获取考勤打卡记录失败',
								type: 'error',
								duration: 5000,
								callback: function() {
									return;
								}
							});
						}
					} else {
						that.$refs.uToast.show({
							title: resuser.msg || '获取考勤打卡记录失败',
							type: 'error',
							duration: 5000,
							callback: function() {
								return;
							}
						});
					}
				}, function(e) {
					console.log('获取考勤打卡记录-err:');
					console.log(e);
				});
			},
			punchClock: function(item) {
				console.log('选择打卡点item:');
				console.log(item);
				const that = this;
				console.log(that.CONFIG);
				if (!(that.CONFIG.user && that.CONFIG.user.id)) {
					that.$refs.uToast.show({
						title: '当前认证的用户没找到',
						type: 'warning',
						duration: 5000,
						callback: function() {
							return;
						}
					});
					return;
				} else {
					that.btmMsg = "btmMsg2";
					clearInterval(that.timer);
					const y = utils.dateFormat('YYYY-mm-dd', new Date());
					const params = {
						code: that.CONFIG.user.id || '',
						name: that.CONFIG.user.name || '',
						position: that.CONFIG.user.position || '',
						dept: that.CONFIG.user.dept || '',
						longitude: item.longitude,
						latitude: item.latitude,
						province: item.province,
						city: item.city,
						area: item.area,
						street: item.street,
						location: item.storeAddress,
						dataDate: (y + ' ' + that.current),
						distanceSm: item.distanceSm || '',
						recordType: '加盟业务员转店打卡',
						storeId: item.id
					};
					dkByMapJmSalesDevice(params, function(resuser) {
						console.log('门店打卡:');
						console.log(resuser);
						if (resuser && resuser.statusCode == 200) {
							const rs = resuser.data;
							console.log('门店打卡结果:');
							console.log(rs);
							if (rs.code == 200) {
								that.dkdata = {};
								that.dkdata.date = (y + ' ' + that.current);
								that.dkdata.name = item.storeName;
								that.showSelectPointsWin = false;
								that.showSuccessWin = true;
							} else {
								that.$refs.uToast.show({
									title: resuser.data.msg||'打卡失败',
									type: 'error',
									duration: 5000,
									callback: function() {
										that.current = utils.dateFormat('HH:MM:SS', new Date());
										that.timer = setInterval(function() {
											that.current = utils.dateFormat('HH:MM:SS', new Date());
										}, 1000);
										that.closeShowSelectPointsWin();
									}
								});
							}
						}
					}, function(e) {
						console.log('门店打卡失败:');
						console.log(e);
					});
				}
			},
			closeShowSelectPointsWin: function() {
				this.showSelectPointsWin = false;
				this.btmMsg = "btmMsg1";
			},
			closeShowSuccessWin: function() {
				const that = this;
				that.current = utils.dateFormat('HH:MM:SS', new Date());
				that.timer = setInterval(function() {
					that.current = utils.dateFormat('HH:MM:SS', new Date());
				}, 1000);
				that.showSuccessWin = false;
				that.btmMsg = "btmMsg1";
				that.getDkNumber();
			},
			getDaKaPoint: function() {
				// 获取考勤点可选列表
				const that = this;
				if (!(that.CONFIG.user && that.CONFIG.user.id)) {
					that.$refs.uToast.show({
						title: '当前认证的用户没找到',
						type: 'warning',
						duration: 5000,
						callback: function() {
							return;
						}
					});
					return;
				}
				if ((!that.longitude) || (!that.latitude)) {
					return;
				}
				const params = {
					longitude: that.longitude,
					latitude: that.latitude,
					province: that.province,
					city: that.city
				};
				getMapJmSalesDeviceInfo(params, function(resuser) {
					console.log('获取考勤点可选列表-success:');
					console.log(resuser);
					if (resuser && resuser.statusCode == 200) {
						const rs = resuser.data;
						if (rs.msg && rs.code === 200) {
							const pointsListRes = rs.data || [];
							that.dakaPointList = [];
							if (pointsListRes) {
								for (const item in pointsListRes) {
									const obj = pointsListRes[item];
									// obj.RANGE = item;
									that.dakaPointList.push(obj);
								}
							}
							console.log('打卡点列表dakaPointList:');
							console.log(that.dakaPointList);
							that.btmMsg = "btmMsg2";
							that.showSelectPointsWin = true;
						} else {
							that.$refs.uToast.show({
								title: rs.msg || '获取打卡点失败！',
								type: 'error',
								duration: 3000
							});
						}
					}
				}, function(e) {
					console.log('获取考勤点可选列表-err:');
					console.log(e);
				});
			},
			toDetailPage: function() {
				uni.navigateTo({
					url: '../dkDetail/index'
				});
			},
			mapinit: function() {
				const that = this;
				that.markersArray = [];
				if (!that.latitude && !that.longitude) {
					return;
				}
				const myCenterPoint = new qq.maps.LatLng(that.latitude, that.longitude);
				const myOptions = {
					zoom: 15,
					center: myCenterPoint,
					panControl: false,
					zoomControl: false,
					//设置控件的地图类型和位置
					mapTypeControlOptions: {
						//设置控件的地图类型ID，ROADMAP显示普通街道地图，SATELLITE显示卫星图像，HYBRID显示卫星图像上的主要街道透明层
						mapTypeIds: [],
						//设置控件位置相对上方中间位置对齐
						position: qq.maps.ControlPosition.TOP_CENTER
					}
				};
				const map = new qq.maps.Map(document.getElementById("mapBox"), myOptions);
				const anchor = new qq.maps.Point(15, 33),
					size = new qq.maps.Size(139, 151),
					scaleSize = new qq.maps.Size(30, 33),
					origin = new qq.maps.Point(0, 0),
					icon = new qq.maps.MarkerImage(
						that.imgUrl,
						size,
						origin,
						anchor,
						scaleSize
					);
				const marker = new qq.maps.Marker({
					map: map,
					position: myCenterPoint
				});
				marker.setIcon(icon);
				const info = new qq.maps.InfoWindow({
					map: map
				});
				marker.setZIndex(30);
				// 调用定位信息
				wxGetTxMapByLatLng({"lat":that.latitude,"lng":that.longitude}, (res)=>{
					if(res.data.status=='00000'){
						let result = res.data.data.result
						that.province = result.address_component.province == undefined ? "" : result.address_component.province;
						that.city = result.address_component.city == undefined ? "" : result.address_component.city;
						that.district = result.address_component.district == undefined ? "" : result.address_component.district;
						that.town = result.address_component.town == undefined ? "" : result.address_component.town;
						that.street = result.address_component.street == undefined ? "" : result.address_component.street;
						that.streetNumber = result.address_component.streetNumber == undefined ? "" : result.address_component.streetNumber;
						that.addressComponents = that.province + that.city + that.district + that.town + that.street + that.streetNumber;
						that.addressComponents1 = that.province + that.city + that.district;
						that.addressComponents2 = that.town + that.street + that.streetNumber;
						map.setCenter(result.location);
					}else{
						uni.showToast({
							message: res.data.message,
							duration: 2000,
							icon: 'error'
						})
					}
				})
				// that.geocoder = new qq.maps.Geocoder({
				// 	complete: function(result) {
				// 		map.setCenter(result.detail.location);
				// 		// city.value = result.detail.address.substring(2);
				// 		/*获取地址*/
				// 		that.province = result.detail.addressComponents.province == undefined ? "" : result.detail.addressComponents
				// 			.province;
				// 		that.city = result.detail.addressComponents.city == undefined ? "" : result.detail.addressComponents.city;
				// 		that.district = result.detail.addressComponents.district == undefined ? "" : result.detail.addressComponents
				// 			.district;
				// 		that.town = result.detail.addressComponents.town == undefined ? "" : result.detail.addressComponents.town;
				// 		that.street = result.detail.addressComponents.street == undefined ? "" : result.detail.addressComponents.street;
				// 		that.streetNumber = result.detail.addressComponents.streetNumber == undefined ? "" : result.detail.addressComponents
				// 			.streetNumber;
				// 		that.addressComponents = that.province + that.city + that.district + that.town + that.street + that.streetNumber;
				// 		that.addressComponents1 = that.province + that.city + that.district;
				// 		that.addressComponents2 = that.town + that.street + that.streetNumber;
				// 		console.log(that.addressComponents);
				// 		console.log(that.addressComponents1);
				// 		console.log(that.addressComponents2);
				// 	}
				// });
				// that.geocoder_latlng(myCenterPoint, function(latLng) {
				// 	that.geocoder.getAddress(latLng);
				// });
			},
			geocoder_latlng: function(myCenterPoint, callback) {
				//获取经纬度信息
				const lat = myCenterPoint.lat;
				var lng = myCenterPoint.lng;
				// //设置经纬度信息
				var latLng = new qq.maps.LatLng(lat, lng);
				//调用城市经纬度查询接口实现经纬查询
				callback(latLng);
			}
		}
	};
</script>

<style>
	page,
	.dk-container {
		width: 100%;
		height: 100%;
		padding: 0;
		margin: 0;
		position: relative;
	}

	.map-web-jm-info {
		width: 100%;
		height: 100rpx;
		text-align: center;
		font-family: PingFang-SC-Bold;
		font-size: 40rpx;
		font-weight: normal;
		font-stretch: normal;
		letter-spacing: 0rpx;
		color: #333333;
		background-color: rgba(255, 255, 255, .8);
		position: fixed;
		z-index: 100;
	}

	.map-web-jm-info text {
		font-size: 60rpx;
		color: #4378be;
	}

	.map {
		width: 100%;
		height: 100%;
		margin: 0 auto;
		/*border: 1rpx solid red;*/
	}

	.map_punch {
		transition: height 0.2s linear;
		width: 100%;
		height: 100%;
		margin: 0 auto;
		/*border: 1rpx solid red;*/
	}

	.cover {
		width: 100%;
		height: 300rpx;
		position: absolute;
		top: 0;
		z-index: 10;
		background: -webkit-gradient(radial, 220 90, 50, 180 165, 245, from(rgba(255, 255, 255, 0.3)), to(rgba(255, 255, 255, 1)));
	}

	.cover_punch {
		transition: height 0s linear;
		width: 100%;
		height: 100rpx;
		position: absolute;
		top: 0;
		z-index: 10;
		background: -webkit-gradient(radial, 220 30, 50, 180 50, 105, from(rgba(255, 255, 255, 0.3)), to(rgba(255, 255, 255, 1)));
	}

	/*打卡信息*/
	.btmMsg1 {
		position: absolute;
		bottom: 60rpx;
		width: 100%;
		background: rgba(255, 255, 255, .5);
		z-index: 100;
	}

	.btmMsg2 {
		position: absolute;
		bottom: 60rpx;
		width: 100%;
		background: rgba(255, 255, 255, .7);
	}

	.weui-cells__title {
		margin-bottom: 0;
	}

	.weizhi {
		margin-top: 3rpx;
		background: rgba(255, 255, 255, .4);
		bottom: 5rpx;
	}

	.weizhi .weui-cell {
		padding: 6rpx 30rpx;
	}

	.weui-cells:after,
	.weui-cells:before {
		content: none;
	}

	.weui-input {
		text-align: center;
		font-size: 32rpx;
	}

	/*打卡按钮*/
	.weui-msg__desc {
		color: #424242;
	}

	.time {
		position: absolute;
		bottom: 54rpx;
		left: 50%;
		transform: translateX(-50%);
		color: #fff;
	}

	.page__bd .weui-btn.daka {
		text-decoration: none;
		background-color: #ffb558;
		color: #fff;
		line-height: 160rpx;
		width: 200rpx;
		height: 200rpx;
		margin: 40rpx 0 0 0rpx;
		border-radius: 50%;
		padding-left: 0;
		padding-right: 0;
		position: relative;
		margin-top: 30rpx;
		font-size: 38rpx;
	}

	.page__bd .weui-btn.daka:after {
		border: none;
	}

	.weui-btn:after {
		content: none;
	}

	/*打卡成功*/
	.success {
		text-align: center;
		margin-top: 20rpx;
		font-size: 40rpx;
	}

	/*打卡失败*/
	.warn {
		text-align: center;
		margin-top: 20rpx;
		font-size: 40rpx;
	}

	/*打卡完成显示时间和位置*/
	.place {
		margin: auto;
		width: 80%;
		/*text-align: center;*/
		font-size: 28rpx;
	}

	.leftPlace {
		float: left;
		/*width: 25%;*/
	}

	.rightPlace {
		width: 75%;
		float: right;
	}

	/*分割线*/
	.heng {
		border-top: 1rpx solid #ddd;
		margin-bottom: 20rpx;
	}

	/*打卡时间和打卡位置*/
	.placeLocation {
		width: 100%;
	}

	.placeTime {
		width: 100%;
	}

	.leftPlaceTime,
	.leftPlaceLocation {
		float: left;
		margin-right: 30rpx;
		font-weight: 400;
	}

	.rightPlaceTime {
		text-align: center;
	}

	.rightPlaceLocation {
		text-align: center;
		display: inline-block;
		width: 100%;
	}

	.mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, .4);
		z-index: 110;
	}

	.select-points-win {
		width: 610rpx;
		height: auto;
		position: relative;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		background: #FFFFFF;
		border-radius: 20rpx;
	}

	.daka-success-win {
		width: 80%;
		height: auto;
		position: relative;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		background: #FFFFFF;
		border-radius: 20rpx;
	}

	.daka-success-win image {
		width: 150rpx;
		height: 150rpx;
		position: relative;
		left: 50%;
		top: 0;
		transform: translate(-50%, 0);
		margin-top: 66rpx;
	}

	.daka-success-tip {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		font-family: PingFang-SC-Bold;
		font-size: 36rpx;
		font-weight: normal;
		font-stretch: normal;
		letter-spacing: 0rpx;
		color: #333333;
	}

	.daka-success-info {
		width: 100%;
		height: 60rpx;
		line-height: 60rpx;
		text-align: left;
		text-indent: 60rpx;
		font-family: PingFang-SC-Regular;
		font-size: 28rpx;
		font-weight: normal;
		font-stretch: normal;
		letter-spacing: 0rpx;
		color: #333333;
	}

	.daka-success-btn {
		width: 230rpx;
		height: 70rpx;
		line-height: 70rpx;
		background-color: #3481f5;
		border-radius: 8rpx;
		text-align: center;
		font-family: PingFang-SC-Regular;
		font-size: 30rpx;
		font-weight: normal;
		font-stretch: normal;
		letter-spacing: 0rpx;
		color: #fefeff;
		position: relative;
		left: 50%;
		top: 0;
		transform: translate(-50%, 0);
		margin-top: 20rpx;
	}

	.select-points-win .top {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		border-radius: 20rpx 20rpx 0 0;
		font-family: PingFang-SC-Bold;
		font-size: 30rpx;
		font-weight: normal;
		font-stretch: normal;
		letter-spacing: 0rpx;
		color: #999999;
	}

	.select-points-win .box {
		width: 100%;
		height: auto;
		max-height: 400px;
		overflow-y: auto;
		border-radius: 0 0 20rpx 20rpx;
	}

	.select-points-win .box .select-points-item {
		width: calc(100% - 30rpx);
		height: auto;
		margin-left: 15rpx;
		display: flex;
		box-shadow: 0rpx 1rpx 40rpx 0rpx rgba(183, 183, 183, 0.27);
		border-radius: 10rpx;
	}

	.select-points-win .box .select-points-item2 {
		width: calc(100% - 30rpx);
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		margin-left: 15rpx;
		font-family: PingFang-SC-Bold;
		font-size: 16rpx;
		font-weight: normal;
		font-stretch: normal;
		letter-spacing: 0rpx;
		color: #333333;
	}

	.select-points-win .box .select-points-item .left {
		height: auto;
		flex: 1;
		padding: 15rpx;
	}

	.select-points-md {
		width: 100%;
		text-align: left;
		font-family: PingFang-SC-Bold;
		font-size: 32rpx;
		font-weight: normal;
		font-stretch: normal;
		letter-spacing: 0rpx;
		color: #333333;
	}

	.select-points-xz {
		width: 100%;
		text-align: left;
		font-family: PingFang-SC-Regular;
		font-size: 28rpx;
		font-weight: normal;
		font-stretch: normal;
		letter-spacing: 0rpx;
		color: #999999;
	}

	.select-points-win .box .select-points-item .right {
		width: 190rpx;
	}

	.select-points-btn {
		width: 160rpx;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		font-family: PingFang-SC-Regular;
		font-size: 32rpx;
		font-weight: normal;
		font-stretch: normal;
		letter-spacing: 0rpx;
		color: #fefeff;
		background-color: #3481f5;
		border-radius: 5rpx;
		position: relative;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}

	.select-points-bottom-line {
		width: 100%;
		height: 30rpx;
	}

	.weui-cells {
		margin-top: 8rpx;
		background-color: #fff;
		background-color: var(--weui-BG-2);
		line-height: 1.41176471;
		font-size: 17rpx;
		overflow: hidden;
		position: relative;
	}

	.weui-cell {
		padding: 16rpx;
		position: relative;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
	}
	.weui-cell__bd {
	    -webkit-box-flex: 1;
	    -webkit-flex: 1;
	    flex: 1;
	}

	.page__bd {
		padding-bottom: 30rpx;
	}

	.page__bd_spacing {
		padding: 0 16rpx;
	}

	.weui-btn:not(.weui-btn_mini)+.weui-btn:not(.weui-btn_mini) {
		margin-top: 16rpx;
	}

	.weui-btn_default:not(.weui-btn_disabled):visited {
		color: #06ae56;
		color: var(--weui-BTN-DEFAULT-COLOR);
	}

	.weui-btn_default {
		color: #06ae56;
		color: var(--weui-BTN-DEFAULT-COLOR);
		background-color: #f2f2f2;
		background-color: var(--weui-BTN-DEFAULT-BG);
	}

	.weui-btn {
		position: relative;
		display: block;
		width: 184rpx;
		margin-left: auto;
		margin-right: auto;
		padding: 8rpx 24rpx;
		box-sizing: border-box;
		font-weight: 700;
		font-size: 17rpx;
		text-align: center;
		text-decoration: none;
		color: #fff;
		line-height: 1.41176471;
		border-radius: 4rpx;
		overflow: hidden;
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	}
</style>
